<template>
    <div class="box">
        <div class="null-page" v-show="yes"></div>

        <el-card class="box-card order-list">
            <div slot="header" class="clearfix"><span>批发管理</span></div>

            <el-tabs v-model="checkStatus" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane label="未开始" name="0"></el-tab-pane>
                <el-tab-pane label="进行中" name="1"></el-tab-pane>
                <el-tab-pane label="已结束" name="2"></el-tab-pane>
            </el-tabs>
            <div>
                <nav>
                    <li>商品信息</li>
                    <li>单价</li>
                    <li>竞标等级</li>
                    <li>批发人数</li>
                    <li>批发状态</li>
                    <li>操作</li>
                </nav>
                <div class="list" v-loading="loading">
                    <div class="item" v-for="(item, index) in checkList" :key="index">
                        <div class="head">
                            <span class="create-time"> {{ $util.timeStampTurnTime(item.start_time) }} </span>

                            <span class="order-type">竞标订单</span>
                        </div>
                        <ul>
                            <li>
                                <div class="img-wrap">
                                    <img :src="$img(item.sku_image.split(',')[0])" />
                                </div>
                                <div class="info-wrap">
                                    <h5>{{ item.sku_name }}</h5>
                                </div>
                            </li>
                            <li>
                                <span>￥{{ item.price }}</span>
                            </li>
                            <li>
                                <span>{{ item.bidding_level +1}}</span>
                            </li>
                            <li>
                                <span>{{ item.pintuan_num }}人团</span>
                            </li>

                            <template>
                                <li>
                                    <!-- <span class="ns-text-color">{{ item.enter_status_name }}</span> -->
                                    <span v-if="item.status == 0">未开始</span>
                                    <span v-if="item.status == 1">进行中</span>
                                    <span v-if="item.status == 2">已结束</span>
                                    <span v-if="item.status == 3">已关闭</span>
                                    <el-link :underline="false" @click="pintuanDetail(item.pintuan_id)">批发管理</el-link>
                                    <el-link :underline="false" @click="pinTuanCopy(item)">点击复制分享链接</el-link>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
                <div v-if="!loading && total == 0" class="empty-wrap">暂无相关订单</div>
            </div>
            
        </el-card>
        <div class="pager">
            <el-pagination 
                background 
                :pager-count="10" 
                :total="total" 
                prev-text="上一页" 
                next-text="下一页" 
                :current-page.sync="currentPage" 
                :page-size.sync="pageSize" 
                @size-change="handlePageSizeChange" 
                @current-change="handleCurrentPageChange" 
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
//import { enterpage } from "@/api/member/my_particulars"
import {  pintuanPage} from "@/api/member/pintuan"
import { pin } from "@/api/pintuan"
import Config from "../../utils/config"

export default {
    name: "pintuanguanli",

    data: () => {
        return {
            checkStatus: "all",
            status: "",
            loading: true,
            checkList: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            yes: true,
            status: 0
        }
    },

    created() {
        this.checkStatus = this.$route.query.status || "all"
       if(this.checkStatus == "all") {
           this.status = ""
       }
        this.getAgentCheckList()
    },

    mounted() {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
    methods: {
        handleClick(tab, event) {
            this.currentPage = 1
            this.checkStatus = tab.name
            if(this.checkStatus == "all") {
                this.status = ""
            }else if(this.checkStatus == "0"){
                this.status = "0"
            }else if(this.checkStatus == "1") {
                this.status = "1"
            }else {
                this.status = "2"
            }
            this.refresh()
        },

        getAgentCheckList() {
            pin({
                page: this.currentPage,
                page_size: this.pageSize,
                status: this.status
            })
                .then((res) => {

                    let list = []
                    if (res.code == 0) {
                        list = res.data.list
                        this.total = res.data.page_count
                    }
                    this.checkList = list
                    this.loading = false
                })
                .catch((res) => {
                    this.loading = false
                })
        },
        handlePageSizeChange(size) {
            this.pageSize = size
            this.refresh()
        },
        handleCurrentPageChange(page) {
            this.currentPage = page
            this.refresh()
        },
        refresh() {
            this.loading = true
            this.getAgentCheckList()
            //this.getPintuanpage()
        },
        pintuanDetail(enter_id) {
            this.$router.push(
                { 
                    path: "/member/pingtuan_manage",
                    query: {
                        enter_id : enter_id
                    }
                }
            )
        },
        pinTuanCopy(item) {
            var url =  `${Config.webDomain}web/promotion/pintuandetail/sku-${item.id}?pintuan_trader_id=${item.pintuan_trader_id}`;
            this.$copy(url);
            // console.log(item)
            // var domUrl = document.createElement("input");
           
            // domUrl.value = url;
            // domUrl.id = "creatDom";
            // document.body.appendChild(domUrl);
            // domUrl.select(); // 选择对象
            // document.execCommand("Copy"); // 执行浏览器复制命令
            // let creatDom = document.getElementById("creatDom");
            // creatDom.parentNode.removeChild(creatDom);
            // this.$message({
            //     message:'复制成功',
            //     type: 'success'
            // })
        },
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}

.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.order-list {
    nav {
        overflow: hidden;
        padding: 10px 0;
        background: #fff;
        margin-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
        li {
            float: left;
            &:nth-child(1) {
                width: 45%;
            }
            &:nth-child(2) {
                width: 10%;
            }
            &:nth-child(3) {
                width: 10%;
            }
            &:nth-child(4) {
                width: 10%;
            }
            &:nth-child(5) {
                width: 15%;
            }
            &:nth-child(6) {
                width: 10%;
            }
        }
    }
    .list {
        .item {
            margin-bottom: 20px;
            border: 1px solid #eeeeee;
            border-top: 0;
            .head {
                padding: 8px 10px;
                background: #f7f7f7;
                font-size: 12px;

                .create-time {
                    margin-right: 10px;
                }

                border-bottom: 1px solid #eeeeee;
                a {
                    margin: 0 10px 0 20px;
                }

                .order-type {
                    margin-left: 30px;
                }
            }
        }
        ul {
            background-color: #fff;
            padding: 10px;
            overflow: hidden;
            li {
                float: left;
                line-height: 60px;
                &:nth-child(1) {
                    width: 43%;
                    line-height: inherit;
                    .img-wrap {
                        width: 60px;
                        height: 60px;
                        float: left;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                    .info-wrap {
                        margin-left: 70px;
                        h5 {
                            font-weight: normal;
                            font-size: $ns-font-size-base;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            margin-right: 10px;
                            display: inline-block;
                            cursor: pointer;
                            &:hover {
                                color: $base-color;
                            }
                        }
                        span {
                            font-size: $ns-font-size-sm;
                            color: #9a9a9a;
                        }
                    }
                }
                &:nth-child(2) {
                    width: 14%;
                }
                &:nth-child(3) {
                    width: 10%;
                }
                &:nth-child(4) {
                    width: 10%;
                }
                &:nth-child(5) {
                    width: 15%;
                    line-height: 30px;
                    a {
                        display: block;
                    }
                }
                &:nth-child(6) {
                    width: 10%;
                    line-height: initial;
                    button {
                        margin-left: 0;
                        margin-bottom: 10px;
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
    .pager {
        margin-top: 20px;
    }
    .empty-wrap {
        text-align: center;
        padding: 10px;
    }
}
</style>
